<template>
	<view class="container">
		<uni-section title="相册浏览" type="line">
			<template v-slot:right>
				<button size="mini" type="primary" @click="uploadPhoto">
					上传相册
				</button>
			</template>
			<uni-card @click="onClick" v-for="(item,index) in photos">
				<view  v-if="onself || (!onself && item.open)">
					<image slot='cover' style="width: 100%;" :src="item.url" @tap.stop="preivewImage(item)"></image>
					<view slot="actions" class="card-actions">
						<view class="card-actions-item" @click="actionsClick(0,item)">
							<uni-icons type="download" size="18" color="#999"  v-if="item.download"></uni-icons>
							<text class="card-actions-item-text" v-if="item.download">可下载</text>
							
							<uni-icons custom-prefix="iconfont" type="icon-xiazai-13-bukexiazai" size="18"  color="red"
							v-if="!item.download"></uni-icons>
							<text class="card-actions-item-text" v-if="!item.download">不可下载</text>
						</view>
						<view class="card-actions-item" @click="actionsClick(1,item)">
							<uni-icons custom-prefix="iconfont" type="icon-jiesuo_o" size="18"  color="#999"
							v-if="item.open"></uni-icons>
							<text class="card-actions-item-text"  v-if="item.open">公开</text>
							<uni-icons type="locked" size="18" color="#999" v-if="!item.open"></uni-icons>
							<text class="card-actions-item-text" v-if="!item.open">不公开</text>
						</view>
					</view>
				</view>
			</uni-card>
		</uni-section>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	const uploadPhoto=()=>{
		uni.chooseImage({
			count: 6, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album','camera '], //从相册选择
			success: function (res) {
				console.log(JSON.stringify(res.tempFilePaths));
			}
		});
	}
	const photos=ref([
		{
			url:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			download: true,
			open:true,
			showMenu:[]
		},
		{
			url:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			download: false,
			open:false,
			showMenu:[]
		},
		{
			url:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			download: true,
			open:true,
			showMenu:[]
		},
		{
			url:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			download: false,
			open:true,
			showMenu:[]
		},
		{
			url:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			download: true,
			open:false,
			showMenu:[]
		},
		{
			url:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			download: true,
			open:true,
			showMenu:[]
		}
	])
	const cover = ref('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')
	//自己可看，别人需要根据open判断是否可看
	//是否是自己
	const onself = ref(true)
	const actionsClick=(type,item)=>{
		if(type == 0){
			//是否下载
			item.download = !item.download
		}else if(type == 1){
			//是否查看
			item.open = !item.open
		}
	}
	const onClick=(e)=>{
	}
	
	const preivewImage=(item)=>{
		item.showMenu=[]
		if(item.download){
			item.showMenu.push('保存')
		}
		// 预览图片
		uni.previewImage({
			urls: [item.url],
			longPressActions: {
				itemList: item.showMenu,
				success: function(data) {
					// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					if(data.tapIndex == 0)[
						//保存图片
						uni.saveImageToPhotosAlbum({
							filePath: item.url,
							success: function () {
							}
						})
					]
				},
				fail: function(err) {
					// console.log(err.errMsg);
				}
			}
		});
	}
</script>

<style lang="scss">

	.container {
			overflow: hidden;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

</style>